<template>
	<el-container style="height: 30%;overflow: auto;">
		<el-main class="nopadding">
			<sc-water-mark ref="wm" :text="waterMarkContent" :subtext="waterMarkSubtext" :showWater="waterMark=='1'">
			<el-header>
				<el-input placeholder="输入关键字进行过滤" v-model="groupFilterText" clearable></el-input>
			</el-header>
			<el-tree ref="fileFolder" class="menu" node-key="folderId" :data="fileFolderList" :props="groupsProps" :current-node-key="''" :highlight-current="true" :expand-on-click-node="false"
					 :filter-node-method="groupFilterNode" @node-click="groupClick">
				<template #default="{node, data}">
					<span class="custom-tree-node">
						<span class="label">{{ node.label }}</span>
						<span class="code">{{ data.code }}</span>
					</span>
				</template>
			</el-tree>
			</sc-water-mark>
		</el-main>
	</el-container>
	<el-container style="height: 70%;overflow: auto;">
		<el-header>
			<div class="left-panel">
				<span style="font-weight: 600;font-size: 18px">{{ (folderName != '' ? '《' + folderName + '》' : '') }}</span>
			</div>
			<div class="right-panel">
				<el-button @click="goBack" :disabled="this.historyIndex==0">后退</el-button>
				<el-button @click="goNext" :disabled="this.historyIndex==this.historyRecord.length">前进</el-button>
			</div>
		</el-header>
		<el-container @contextmenu.prevent="openMenu('folderContextmenu',$event)" style="height: unset;">
			<el-card shadow="never" style="width:100%">
				<el-alert v-if="this.folderId==''" title="请选择目录查看文件" type="warning" style="margin-bottom:20px;"></el-alert>
				<sc-water-mark ref="wm" :text="waterMarkContent" :subtext="waterMarkSubtext" :showWater="waterMark=='1'">
				<el-col v-if="childFolderList.length==0&&fileList.length==0">
					<el-empty description="目录下没有文件" :image-size="100"></el-empty>
				</el-col>
				<el-row :gutter="15">
					<el-col style="background-color: #f9f9f9;padding: 10px;margin: 5px" :xl="3" :lg="3" :md="4" :sm="6" :xs="24" v-for="item in childFolderList" :key="item.fileId"
							@dblclick="openFolder(item)"
							@contextmenu.prevent.stop="openMenu('folderOtherContextmenu',$event,item)">
						<div style="text-align: center;">
							<el-icon style="font-size: 40px;">
								<el-icon-folder-opened/>
							</el-icon>
						</div>
						<div style="text-align: center;font-size: 16px;font-weight: 600;text-overflow: ellipsis;width: 100%;overflow: hidden;white-space: nowrap;">
							{{ item.fileName }}
						</div>
					</el-col>
					<el-col style="background-color: #f9f9f9;padding: 10px;margin: 5px" :xl="3" :lg="3" :md="4" :sm="6" :xs="24" v-for="item in fileList" :key="item.fileId"
							@contextmenu.prevent.stop="openMenu('fileContextmenu',$event,item)" @dblclick="preview(item)">
						<div style="text-align: center;">
							<el-icon style="font-size: 40px;" :title="(item.fileSize/(1024*1024)).toFixed(2)+`MB`">
								<component :is="getFileTypeIcon(item.extName)"/>
							</el-icon>
						</div>
						<div style="text-align: center;font-size: 16px;font-weight: 600;text-overflow: ellipsis;width: 100%;overflow: hidden;white-space: nowrap;">
							<span :title="item.remark">{{ item.fileName }}</span>
						</div>
					</el-col>
				</el-row>
				</sc-water-mark>
			</el-card>
		</el-container>
	</el-container>
	<sc-contextmenu ref="fileContextmenu" @command="handleCommand">
		<sc-contextmenu-item v-if="folderRole.manageRole" command="copy" title="复制" icon="el-icon-document-copy"></sc-contextmenu-item>
		<sc-contextmenu-item v-if="folderRole.manageRole" command="shear" title="剪切" icon="el-icon-scissor"></sc-contextmenu-item>
		<sc-contextmenu-item v-if="folderRole.manageRole" command="delete" title="删除" icon="el-icon-delete"></sc-contextmenu-item>
		<sc-contextmenu-item v-if="folderRole.manageRole" command="rename" title="重命名" icon="el-icon-finished"></sc-contextmenu-item>
		<sc-contextmenu-item v-if="folderRole.manageRole" command="version" title="历史版本" icon="el-icon-expand"></sc-contextmenu-item>
		<sc-contextmenu-item v-if="folderRole.downRole" command="down" title="下载" icon="el-icon-download"></sc-contextmenu-item>
		<sc-contextmenu-item command="preview" title="预览" icon="el-icon-view"></sc-contextmenu-item>
	</sc-contextmenu>

	<sc-contextmenu ref="folderOtherContextmenu" @command="handleCommand">
		<sc-contextmenu-item command="openFolder" title="打开" icon="el-icon-plus"></sc-contextmenu-item>
		<sc-contextmenu-item v-if="folderRole.manageRole" command="copyFolder" title="复制" icon="el-icon-document-copy"></sc-contextmenu-item>
		<sc-contextmenu-item v-if="folderRole.manageRole" command="shearFolder" title="剪切" icon="el-icon-scissor"></sc-contextmenu-item>
		<sc-contextmenu-item v-if="folderRole.manageRole" command="deleteFolder" title="删除" icon="el-icon-folder-checked"></sc-contextmenu-item>
		<sc-contextmenu-item v-if="folderRole.manageRole" command="renameFolder" title="重命名" icon="el-icon-finished"></sc-contextmenu-item>
	</sc-contextmenu>

	<sc-contextmenu ref="folderContextmenu" @command="handleCommand">
		<sc-contextmenu-item v-if="folderRole.createRole" command="createFile" title="新建文件" icon="el-icon-plus"></sc-contextmenu-item>
		<sc-contextmenu-item v-if="folderRole.createRole" command="createFolder" title="新建文件夹" icon="el-icon-edit"></sc-contextmenu-item>
		<sc-contextmenu-item v-if="folderRole.manageRole" command="paste" title="粘贴" icon="el-icon-folder-checked" :disabled="this.optId==''"></sc-contextmenu-item>
	</sc-contextmenu>
	<file-dialog v-if="dialog.save" :folder-id="this.folderId" ref="fileDialog" @success="handleSaveSuccess" @closed="dialog.save=false"></file-dialog>
	<attach-version v-if="dialog.versionSave" :attach-id="this.fileItem.attachId" ref="fileVersionDialog" @closed="dialog.versionSave=false"></attach-version>
</template>
<script>
import iconSelect from "@/config/iconSelect"
import publicFilUtils from '@/views/file/public/publieFileUtils'
import attachUtils from "@/utils/attachUtils";
import scContextmenu from '@/components/scContextmenu'
import scContextmenuItem from '@/components/scContextmenu/item'
import fileDialog from "./fileDialog";
import AttachVersion from "@/views/module/attachVersion";

export default {
	name: 'Public File',
	mixins: [publicFilUtils, attachUtils],
	components: {
		AttachVersion,
		fileDialog,
		scContextmenu,
		scContextmenuItem,
	},
	data() {
		return {
			dialog: {
				save: false,
				versionSave: false
			},
			fileType: "",
			optType: "",
			optId: "",
			folderRole: {},
			childFolderList: [],
			historyRecord: [],
			historyIndex: 0,
			fileList: [],
			fileItem: {},
			folderId: '',
			openFolderId: this.$route.query.openFolderId,
			openFolderName: this.$route.query.openFolderName,
			openParentId: this.$route.query.openParentId,
			folderName: '',
			showGrouploading: false,
			groupFilterText: '',
			fileFolderList: [],
			groupsProps: {
				label: "folderName",
				value: "folderId"
			},
			rules: {},
			waterMarkContent: '',
			waterMarkSubtext: '',
			waterMark: '0',
		}
	},
	watch: {
		groupFilterText(val) {
			this.$refs.fileFolder.filter(val);
		},
	},
	mounted() {
		this.waterMark = this.$TOOL.data.get("WATER_MARK");
		this.waterMarkContent = this.$TOOL.data.get("WATER_MARK_CONTENT");
		this.waterMarkSubtext = this.$TOOL.data.get("WATER_MARK_SUBTEXT");
		this.getPublicFileFolderGroup()
		if(this.openParentId!=''&&this.openParentId!=undefined)
		{
			var item = {
				folderId: this.openFolderId,
				folderName: this.openFolderName,
				parentId: this.openParentId
			}
			this.groupClick(item)
		}
	},
	methods: {
		goBack() {
			if (this.historyIndex > 0) {
				this.historyIndex = this.historyIndex - 1;
				var item = this.historyRecord[this.historyIndex];
				this.folderId = item.sourceFolderId;
				this.folderName = item.sourceFolderName;
				this.getPublicFileList(item.sourceFolderId);
				this.getPublicFolderRoleInfo(item.sourceFolderId);
			}
		},
		goNext() {
			if (this.historyIndex < this.historyRecord.length) {
				var item = this.historyRecord[this.historyIndex];
				this.historyIndex = this.historyIndex + 1;
				this.folderId = item.folderId;
				this.folderName = item.folderName;
				this.getPublicFileList(item.folderId);
				this.getPublicFolderRoleInfo(item.folderId);
			}
		},
		//加载树数据
		async getPublicFileFolderGroup() {
			this.showGrouploading = true;
			var res = await this.$API.file.publicFile.getMyPublicFolderInRole.get();
			this.showGrouploading = false;
			this.fileFolderList = res.data;
		},
		//树过滤
		groupFilterNode(value, data) {
			if (!value) return true;
			return data.folderName.indexOf(value) !== -1;
		},
		//树点击事件
		groupClick(data) {
			var sourceFolderId = this.folderId;
			var sourceFolderName = this.folderName;
			this.historyIndex = this.historyIndex + 1;
			this.folderId = data.folderId
			this.folderName = data.folderName;
			this.historyRecord.push({sourceFolderId: sourceFolderId, sourceFolderName: sourceFolderName, folderId: this.folderId, folderName: this.folderName});
			this.getPublicFileList(data.folderId);
			this.getPublicFolderRoleInfo(data.folderId);
		},
		openFolder(item) {
			var sourceFolderId = this.folderId;
			var sourceFolderName = this.folderName;
			this.historyIndex = this.historyIndex + 1;
			this.folderId = item.fileId;
			this.folderName = item.fileName;
			this.fileItem = item;
			this.historyRecord.push({sourceFolderId: sourceFolderId, sourceFolderName: sourceFolderName, folderId: this.folderId, folderName: this.folderName});
			this.getPublicFileList(item.fileId);
			this.getPublicFolderRoleInfo(item.fileId);
		},
		async handleCommand(command) {
			if (command == "createFile") {
				this.dialog.save = true
				this.$nextTick(() => {
					this.$refs.fileDialog.open()
				})
			} else if (command == "createFolder") {
				this.$prompt('请输文件夹新名称', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputErrorMessage: '新文件夹名称不能为空'
				}).then(({value}) => {
					if (!value) {
						this.$alert('新文件夹名称不能为空', "提示", {type: 'error'})
					} else {
						this.createFolder(this.folderId, value)
					}
				}).catch(() => {
				})
			} else if (command == "edit") {
				this.openFileOnLine(this.fileItem.extName, this.fileItem.attachId, 4);
			} else if (command == "read") {
				this.openFileOnLine(this.fileItem.extName, this.fileItem.attachId, 1);
			} else if (command == "version") {
				this.dialog.versionSave = true
				this.$nextTick(() => {
					this.$refs.fileVersionDialog.open()
				})
			} else if (command == "shear") {
				this.fileType = "file";
				this.optType = "1";
				this.optId = this.fileItem.fileId;
				this.$message.success("剪切成功,请选择粘贴位置");
			} else if (command == "shearFolder") {
				this.fileType = "folder";
				this.optType = "1";
				this.optId = this.fileItem.fileId;
				this.$message.success("剪切成功,请选择粘贴位置");
			} else if (command == "copy") {
				this.fileType = "file";
				this.optType = "2";
				this.optId = this.fileItem.fileId;
				this.$message.success("拷贝成功,请选择粘贴位置");
			} else if (command == "copyFolder") {
				this.fileType = "folder";
				this.optType = "2";
				this.optId = this.fileItem.fileId;
				this.$message.success("拷贝成功,请选择粘贴位置");
			} else if (command == "paste") {
				this.paste(this.fileType, this.optType, this.optId, this.folderId);
			} else if (command == "delete") {
				this.$confirm(`确定删除选中的《` + this.fileItem.fileName + `》文件吗？`, '提示', {
					type: 'warning'
				}).then(async () => {
					const loading = this.$loading();
					this.delete(this.fileItem);
					loading.close();
				}).catch(() => {
				})
			} else if (command == "deleteFolder") {
				this.$confirm(`确定删除选中的《` + this.fileItem.fileName + `》目录吗？如果删除项中含有子集将会被一并删除`, '提示', {
					type: 'warning'
				}).then(async () => {
					const loading = this.$loading();
					this.deleteFolder(this.fileItem);
					loading.close();
				}).catch(() => {
				})
			} else if (command == "openFolder") {
				this.folderId = this.fileItem.fileId;
				this.folderName = this.fileItem.fileName;
				this.getPublicFileList(this.fileItem.fileId);
				this.getPublicFolderRoleInfo(this.fileItem.fileId);
			} else if (command == "preview") {
				this.preview(this.fileItem)
			} else if (command == "down") {
				this.down(this.fileItem)
			} else if (command == "renameFolder") {
				this.$prompt('请输文件夹新名称', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputErrorMessage: '新文件夹名称不能为空'
				}).then(({value}) => {
					if (!value) {
						this.$alert('新文件夹名称不能为空', "提示", {type: 'error'})
					} else {
						this.renameFolder(this.fileItem, value)
					}
				}).catch(() => {
				})
			} else if (command == "rename") {
				this.$prompt('请输文件新名称', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputErrorMessage: '新文件名称不能为空'
				}).then(({value}) => {
					if (!value) {
						this.$alert('新文件名称不能为空', "提示", {type: 'error'})
					} else {
						this.rename(this.fileItem, value)
					}
				}).catch(() => {
				})
			}
		},
		openMenu(menu, e, item) {
			this.$refs.folderContextmenu.closeMenu();
			this.$refs.folderOtherContextmenu.closeMenu();
			this.$refs.fileContextmenu.closeMenu();
			this.fileItem = item;
			this.$refs[menu].openMenu(e);
		},
		async getPublicFileList(folderId) {
			var res = await this.$API.file.publicFile.getPublicFileList.get({folderId: folderId,createTime:['','']});
			if (res.code == 200) {
				this.childFolderList = res.data.folderList;
				this.fileList = res.data.fileList;
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		async getPublicFolderRoleInfo(folderId) {
			var res = await this.$API.file.publicFile.getPublicFolderRoleInfo.get({folderId: folderId});
			if (res.code == 200) {
				this.folderRole = res.data;
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		getFileTypeIcon(extName) {
			var iconName = "sc-icon-" + extName.substr(1, extName.length);
			if (iconSelect.icons[1].icons.indexOf(iconName) !== -1) {
				return iconName;
			} else {
				return 'sc-icon-unknown-file';
			}
		},
		handleSaveSuccess() {
			this.getPublicFileFolderGroup();
			this.getPublicFileList(this.folderId);
			this.getPublicFolderRoleInfo(this.folderId);
		}
	}
}
</script>
<style scoped>
.custom-tree-node {
	/*display: flex;*/
	flex: 1;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	padding-right: 24px;
	height: 100%;
}

.custom-tree-node .code {
	font-size: 12px;
	color: #999;
}

.custom-tree-node .do {
	margin-left: 10px;
	display: none;
}

.custom-tree-node:hover .code {
	display: none;
}

.custom-tree-node:hover .do {
	margin-left: 10px;
	display: inline-block;
}
</style>
